import { PureComponent } from "react";
import { connect } from "react-redux";
import { changeName, changeAge, asyncGetData } from "../store/modules/useInfo";
export class Home extends PureComponent {
  componentDidMount() {
    this.props.homeAsyncGetData();
  }
  render() {
    const { person } = this.props;
    return (
      <div>
        Home
        <div>
          name:{person.name} -- {person.age}
        </div>
        <button onClick={() => this.props.homeChangeAge()}>点我年龄+1</button>
        <button onClick={() => this.props.homeChangeName("李四")}>
          点我修改名字为李四
        </button>
        <button onClick={() => this.props.homeChangeName("王五")}>
          点我修改名字为王五
        </button>
        <h1>数据列表</h1>
        <ul>
          {this.props.listData.map(v => (
            <li key={v.id}>{v.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    person: state.useInfo,
    listData: state.useInfo.listData,
  };
};

const mapDispatchToProps = dispatch => ({
  homeChangeAge() {
    dispatch(changeAge());
  },
  homeChangeName(name) {
    dispatch(changeName(name));
  },
  homeAsyncGetData() {
    dispatch(asyncGetData());
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);
